import React from 'react';
import { Form, Button, Input, Select, Divider, DatePicker, message } from 'antd';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { CaretDownOutlined, UploadOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;

interface SearchHeaderProps {
	onSearch: (condition: any) => void;
	onReset: () => void;
	exportFile: (condition: any) => void;
}

const FormWrapper = styled(Form)`
	display: flex;
	flex-wrap: wrap;
    gap: 10px;
	font-size: 13px;
	margin-bottom: 20px;

	.ant-form-item {
		width: 200px;
	}

	.ant-col {
		width: 100%;
		text-align: left;
	}

	label {
		font-size: 13px;
	}

	.ant-select-selection-item {
		font-size: 13px;
	}

	button {
		font-size: 13px;
	}

	input {
		font-size: 13px;
	}
`;

const Label = styled.p`
	margin: 10px 0;
	font-weight: 500;
	font-size: 13px;
`;

const InputItem = styled(Input)`
	width: 200px;
`;

const SelectItem = styled(Select)`
	width: 200px;
`;

const DividerItem = styled(Divider)`
	margin: 0 0 15px 0;
`;

const ButtonSpan = styled.span`
	cursor: pointer;
	margin-left: 10px;
`;

const DefaultButtonSpan = styled.span`
	cursor: pointer;
	margin-left: 10px;

	.ant-btn-default {
		background: #fff;
		color: #444;
	}
`;

const ButtonWrapper = styled.div`
	display: flex;
	justify-content: center;
	align-items: flex-end;
`;

const RangePickerItem = styled(RangePicker)`
    width: 400px;
`;

const FormItem = styled(Form.Item)`
	margin: 0;
`;

const ExportButton = styled(Button)`
	width: 90px;
	margin-bottom: 10px;
`;

const SearchHeader = (props: SearchHeaderProps) => {
	const { t } = useTranslation();
	const { onSearch, onReset } = props;

	const [form] = Form.useForm();

	// 会话ID
	const [sesionId, setSesionId] = React.useState('');
	// 通话开始时间
	const [acceptedTime, setAcceptedTime] = React.useState([]);
	// 是否接听
	const [isAccepted, setIsAccepted] = React.useState(-1);
	// 是否接听
	const [isConnect, setIsConnect] = React.useState(-1);
	// 业务场景
	const [scenarioName, setScenarioName] = React.useState('');
	// 评价
	const [curRate, setCurRate] = React.useState(0);

	const handleSearch = () => {
		const condition = {
			sesionId,
			acceptedTime,
			isAccepted,
			isConnect,
			scenarioName,
			curRate
		};
		console.log('condition', condition);
		// 起始时间(含)<结束时间(含)，否则，阻断并提示”起始时间(含)<结束时间(含)“
		// 起始时间(含)~结束时间(含)不超过一个月，否则，阻断并提示“起始时间(含)
		// ~结束时间(含)不得超过一个月”
		const startTime = acceptedTime;
		if (startTime && startTime.length > 0) {
			const start = new Date(startTime[0]).getTime();
			const end = new Date(startTime[1]).getTime();
			if (start >= end) {
				message.warning('起始时间(含)<结束时间(含)');
				return;
			}
			if (dayjs(startTime[1]).diff(dayjs(startTime[0]), 'month') >= 1) {
				message.warning('起始时间(含)~结束时间(含)不得超过一个月');
				return;
			}
		}
		onSearch(condition);
	};

	const handleSesionIdChange = (e: any) => {
		setSesionId(e.target.value);
	};

	const handleAcceptedTimeChange = (value: any, dateString: any) => {
		setAcceptedTime(dateString);
	};

	const handleAcceptedChange = (value: any) => {
		setIsAccepted(value);
	};

	const handleConnectChange = (value: any) => {
		setIsConnect(value);
	};

	const handleScenarioNameChange = (e: any) => {
		setScenarioName(e.target.value);
	};

	const handleRateChange = (value: any) => {
		setCurRate(value);
	};

	const handleReset = () => {
		setSesionId('');
		setAcceptedTime([]);
		setIsAccepted(-1);
		setIsConnect(-1);
		setScenarioName('');
		setCurRate(0);

		form.resetFields();
		onReset();
	};

	const yesNoOptions = [
		{
			value: -1,
			label: '全部'
		},
		{
			value: 0,
			label: '否'
		},
		{
			value: 1,
			label: '是'
		},
	];

	const rateOption = [
		{
			value: 0,
			label: '全部'
		},
		{
			value: 1,
			label: '非常不满意'
		},
		{
			value: 2,
			label: '不满意'
		},
		{
			value: 3,
			label: '一般'
		},
		{
			value: 4,
			label: '满意'
		},
		{
			value: 5,
			label: '非常满意'
		},
		{
			value: -1,
			label: '未提交'
		}
	];
	// 会话ID、通话开始时间、是否接听、是否接通、业务场景、评价

	const exportFile = async () => {
		const condition = {
			sesionId,
			acceptedTime,
			isAccepted,
			isConnect,
			scenarioName,
			curRate
		};
		console.log('condition', condition);
		// 起始时间(含)<结束时间(含)，否则，阻断并提示”起始时间(含)<结束时间(含)“
		// 起始时间(含)~结束时间(含)不超过一个月，否则，阻断并提示“起始时间(含)
		// ~结束时间(含)不得超过一个月”
		const startTime = acceptedTime;
		if (startTime && startTime.length > 0) {
			const start = new Date(startTime[0]).getTime();
			const end = new Date(startTime[1]).getTime();
			if (start >= end) {
				message.warning('起始时间(含)<结束时间(含)');
				return;
			}
			// if (dayjs(startTime[1]).diff(dayjs(startTime[0]), 'month') >= 1) {
			// 	message.warning('起始时间(含)~结束时间(含)不得超过一个月');
			// 	return;
			// }
		}
		props.exportFile(condition);
	};

	return (
		<>
			{/* label 查询条件 */}
			{/* <Label>查询条件</Label> */}
			<FormWrapper layout="vertical" form={form}>
				<FormItem label="会话ID" name="sesionId">
					<InputItem value={sesionId} onChange={handleSesionIdChange} />
				</FormItem>
				<FormItem label="通话开始时间" name="acceptedTime" style={{ width: '400px' }}>
					<RangePickerItem showTime format="YYYY-MM-DD HH:mm:ss" onChange={handleAcceptedTimeChange} />
				</FormItem>
				<FormItem label="是否接听" name="isAccepted" initialValue={-1}>
					<SelectItem options={yesNoOptions} onChange={handleAcceptedChange} />
				</FormItem>
				<FormItem label="是否接通" name="isConnect" initialValue={-1}>
					<SelectItem options={yesNoOptions} onChange={handleConnectChange} />
				</FormItem>
				<FormItem label="业务场景" name="scenarioName">
					<InputItem value={scenarioName} onChange={handleScenarioNameChange} />
				</FormItem>
				<FormItem label="评价" name="rate" initialValue={0}>
					<SelectItem options={rateOption} onChange={handleRateChange} />
				</FormItem>

				<ButtonWrapper>
					{/* 重置按钮 */}
					<DefaultButtonSpan>
						<Button type="default" onClick={handleReset}>
							{t('reset')}
						</Button>
					</DefaultButtonSpan>
					<ButtonSpan>
						<Button type="primary" onClick={handleSearch}>
							{t('search')}
						</Button>
					</ButtonSpan>
				</ButtonWrapper>
			</FormWrapper>
			{/* 分割线 */}
			{/* <DividerItem /> */}
			<ExportButton type="primary" icon={<UploadOutlined />} onClick={exportFile}>
				{t('export')}
			</ExportButton>
		</>
	);
};

export default SearchHeader;
